<!--
 * @Description: 查找处理人回复
-->
<template>
  <CommentSearch
    v-if="item.id === 'commentSearch'"
    key="commentSearch"
    trigger="click"
  >
    <template v-slot="slotProps">
      <a-button
        :size="btnSize"
        :disabled="item.disable"
        :type="getBtnType(item)"
        :class="['toolbar-btn-wrapper', { 'toolbar-link-btn-wrapper': getBtnType(item) === 'link' }]"
        @click.native="slotProps.click"
      >
        <i
          v-if="isShowIcon"
          :class="[item.icon, { 'suffix-icon': isShowText }]"
          :style="`color: ${getIconColor(item)}`"
        />
        <template v-if="isShowText">{{ item.name }}</template>
      </a-button>
    </template>
  </CommentSearch>
  <a-tooltip
    v-else-if="!item.disable"
    :key="item.id"
    :title="btnDisplayMode === '1' || getTextWidth(item.name) ? item.name : ''"
    placement="bottom"
  >
    <a-button
      :size="btnSize"
      :disabled="false"
      :type="getBtnType(item)"
      :class="['toolbar-btn-wrapper', { 'toolbar-link-btn-wrapper': getBtnType(item) === 'link' }]"
      @click="handleClick(item)"
    >
      <template v-if="isShowIcon">
        <i
          v-if="!iconFontBtns.includes(item.icon)"
          :class="[item.icon, { 'suffix-icon': isShowText }]"
          :style="`color: ${getIconColor(item)}`"
        />
        <icon-font
          v-else
          :type="item.icon"
          :class="{'icon-active': iconSvgBtns.includes(item.icon)}"
          style="font-size: 16px"
        />
      </template>
      <template v-if="isShowText">{{ item.name }}</template>
    </a-button>
  </a-tooltip>
  <a-button
    v-else
    :key="item.id"
    :size="btnSize"
    disabled
    :type="getBtnType(item)"
    :class="['toolbar-btn-wrapper', { 'toolbar-link-btn-wrapper': getBtnType(item) === 'link' }]"
    @click="handleClick(item)"
  >
    <template v-if="isShowIcon">
      <i
        v-if="!iconFontBtns.includes(item.icon)"
        :class="[item.icon, { 'suffix-icon': isShowText }]"
        :style="`color: ${getIconColor(item)}`"
      />
      <icon-font
        v-else
        :type="item.icon"
        :class="{'icon-active': iconSvgBtns.includes(item.icon)}"
        style="font-size: 16px"
      />
    </template>
    <template v-if="isShowText">{{ item.name }}</template>
  </a-button>
</template>

<script>
  import CommentSearch from './comment-search';

  export default {
    name: 'ButtonItem',
    components: {
      CommentSearch
    },
    props: {
      item: {},
      isShowIcon: {},
      isShowText: {},
      getBtnType: {},
      getIconColor: {},
      handleClick: {},
      iconFontBtns: {},
      iconSvgBtns:[],
      commentSearch: {},
      btnDisplayMode: {},
      btnSize: {
        type: String,
      },
    },
    data() {
      return {};
    },
    watch: {},
    created() {},
    beforeDestroy() {},
    methods: {
      // 获取文本长度
      getTextWidth (str) {
        const fontSize = this.btnSize === 'large' ? '16px' : '14px';
        let result = 10;
        let ele = document.createElement('span')
        ele.innerText = str;
        ele.style.fontSize = fontSize;
        document.documentElement.append(ele);
        result = ele.offsetWidth;
        document.documentElement.removeChild(ele);
        if (result >= 84 && this.btnDisplayMode === "2") {
          return true;
        }
        return false;
      },
    }
  };
</script>

<style scoped lang="scss">
  .toolbar-link-btn-wrapper {
    margin-right: 0 !important;
    padding-right: 13px;

    &:hover {
      color: #1890ff !important;
      color: var(--theme-brand6, #1890ff) !important;
    }
    .icon-active{
      color: #1890ff;
      color: var(--theme-brand6, #1890ff);
    }
  }
  //对打印收藏等svg图标个性设置
  .ant-btn-sm.toolbar-link-btn-wrapper{
    padding-right: 14px;
  }
</style>
